/**
聊天组件-列表
TODO: 需要增加搜索和选择不同部门的用户，并发送消息
属性：
  list:Array[
    {
      type:['user','group'], //用户还是群组
      name:String,  //用户或群组名称
      id:String,  //用户或群组id
      icon:String,  //用户或群组头像，群组可以为空
      member:[{id:String,name:String,icon:String}],  //群组成员
      messages:Array[{
              user: { id: String, name: String, icon: String }, 用户信息
              isGroup:Boolean:false, 是否群组
              value:String、Object, 内容
              time:Number 录音时长,
              type:['text','audio','video','file','image','system','approval'] 消息类型
              date:Date,default:new Date() 消息发送时间
              showDate:Boolean,default:true 是否显示时间
              source:['me','else'] 区分我发的还是别人发的
    }
  ],
  expand:Boolean 是否展开，默认true
事件：
  select(item) 双击列表时触发，参数为列表包含的数据
  itemClick(item) 单击列表时触发，参数为列表包含的数据
 */
<template>
  <div
    class="chat-list scrollbar"
    :style="{ height: height + 'px', width: expand ? '100%' : '55px' }"
  >
    <div
      class="chat-list-item"
      v-for="item in list"
      :key="item.id"
      @click="$emit('itemClick', item)"
      @dblclick="onSelect(item)"
      :style="selectItem == item ? { background: '#efbf4f' } : {}"
    >
      <div class="chat-list-item-icon" v-if="item.type == 'user'">
        <el-badge :value="getBadgeValue(item)" class="item">
          <el-avatar
            v-if="item.icon"
            shape="square"
            :size="32"
            :src="item.icon"
            :icon="item.icon"
          ></el-avatar>
          <el-avatar
            v-else
            shape="square"
            :size="32"
            :style="{ backgroundColor: '#409EFF' }"
            >{{ item.name }}</el-avatar
          >
        </el-badge>
      </div>
      <div class="chat-list-item-icon" v-if="item.type == 'group'">
        <el-badge :value="getBadgeValue(item)" class="item">
          <div class="chat-list-item-group-icon" v-if="item.member.length >= 4">
            <template v-for="i in 4">
              <el-avatar
                :key="i"
                v-if="item.member[i - 1].icon"
                shape="square"
                :size="14"
                style="font-size:8px;"
                :src="item.member[i - 1].icon"
                :icon="item.member[i - 1].icon"
              ></el-avatar>
              <el-avatar
                v-else
                :key="i"
                shape="square"
                :size="14"
                style="font-size:8px;"
                :style="{ backgroundColor: '#E6A23C' }"
                >{{ item.member[i - 1].name }}</el-avatar
              >
            </template>
          </div>
          <div class="chat-list-item-group-icon" v-else>
            <template v-for="(member, i) in item.member">
              <el-avatar
                :key="i"
                v-if="item.member[i].icon"
                shape="square"
                :size="14"
                style="font-size:8px;"
                :src="item.member[i].icon"
                :icon="item.member[i].icon"
              ></el-avatar>
              <el-avatar
                v-else
                :key="i"
                shape="square"
                :size="14"
                style="font-size:8px;"
                :style="{ backgroundColor: '#E6A23C' }"
                >{{ item.member[i - 1].name }}</el-avatar
              >
            </template>
          </div>
        </el-badge>
      </div>
      <div class="chat-list-item-body">
        <div class="chat-list-item-body-name">
          <span>{{ item.name }}</span>
          <div class="chat-list-item-time">
            <span v-if="getMaxTime(item) != ''">{{ getMaxTime(item) }}</span>
          </div>
        </div>
        <div class="chat-list-item-body-msg">
          {{ getMaxTimeText(item) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    methods: ["itemClick", "select"],
  },
  props: {
    list: {
      type: Array,
      default: () => [
        {
          type: "user",
          name: "test1",
          id: "1",
          icon:
            "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
          messages: [
            {
              user: { id: 1, name: "ok", icon: "el-icon-setting" },
              msg: "fdsafdsafdasfdas",
              read: true,
              time: new Date(),
            },
            {
              user: { id: 1, name: "ok", icon: "el-icon-setting" },
              msg: "fdsafdsafdasfdas",
              read: true,
              time: new Date(),
            },
            {
              user: { id: 1, name: "ok", icon: "el-icon-setting" },
              msg: "fdsafdsafdasfdas",
              read: true,
              time: new Date(),
            },
          ],
        },
        {
          type: "group",
          name: "test2",
          id: "2",
          icon: "el-icon-setting",
          member: [
            {
              id: "1",
              name: "test1",
              icon:
                "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            },
            { id: "2", name: "test2", icon: "el-icon-setting" },
            { id: "3", name: "test3", icon: "el-icon-setting" },
            {
              id: "1",
              name: "test1",
              icon:
                "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            },
            { id: "2", name: "test2", icon: "el-icon-setting" },
            { id: "3", name: "test3", icon: "el-icon-setting" },
            {
              id: "1",
              name: "test1",
              icon:
                "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            },
            { id: "2", name: "test2", icon: "el-icon-setting" },
            { id: "3", name: "test3", icon: "el-icon-setting" },
          ],
          messages: [],
        },
      ],
    },
    expand: { type: Boolean, default: true },
  },
  data() {
    return {
      height: document.documentElement.clientHeight - 50,
      selectItem: {},
    };
  },
  methods: {
    getBadgeValue(item) {
      if (item.messages.length > 99) {
        return "...";
      } else if (item.messages.length > 0) {
        return item.messages.length;
      } else {
        return "";
      }
    },
    getMaxTime(item) {
      const msgs = item.messages;
      return msgs[msgs.length-1].date
    },
    getMaxTimeText(item) {
      return item.messages[item.messages.length-1].value
    },
    onSelect(item) {
      this.$emit("select", item);
      this.selectItem = item;
    },
  },
  mounted() {
    const self = this;
    //根据窗口大小调整
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        self.height = window.fullHeight - 50;
      })();
    };
  },
};
</script>

<style lang="less" scoped>
.chat-list {
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #ececec;
}
.chat-list-item {
  background-color: #f2f6fc;
  padding: 5px 0px;
  margin-bottom: 5px;
  height: 40px;
  max-height: 40px;
  display: flex;
  cursor: pointer;
  border-radius: 3px;
}
.chat-list-item:hover {
  background-color: #e4e7ed;
}
.chat-list-item-icon {
  width: 60px;
  flex: 0 0 60px;
  justify-content: start;
  height: 40px;
  margin-top: 5px;
  margin-left: 5px;
}
.chat-list-item-group-icon {
  width: 32px;
  flex: 0 0 40px;
  justify-content: start;
  height: 32px;
  background-color: #67c23a;
  border-radius: 4px;
  text-align: center;
  word-wrap: break-word;
  line-height: 9px;
  span {
    margin: 0.5px;
    border-radius: 3px;
  }
}
.chat-list-item-body {
  width: 100%;
}
.chat-list-item-body-name {
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  display: flex;
  overflow: hidden;
  max-width: 310px;
  span {
    justify-content: start;
    width: 100%;
    overflow: hidden;
  }
}
.chat-list-item-body-msg {
  font-size: 12px;
  color: #aaa;
  height: 16px;
  overflow: hidden;
}
.chat-list-item-time {
  justify-content: end;
  width: 60px;
  flex: 0 0 60px;
  font-size: 12px;
  color: #aaa;
  text-align: right;
  span {
    margin-right: 10px;
    background-color: #aaa;
    color: #fff;
    padding: 1px 5px;
    border-radius: 10px;
  }
}
</style>
